<template>
  <div class="jieda-content">
    <div class="qestion-list">
      <ul>
        <li v-for="(item,index) in postJiedaLists.jieDaLists" :key="index">
          <h6>{{item.title}}</h6>
          <p v-if="item.audio === false" class="answer-detail">{{item.content}}</p>
          <div v-if="item.audio === true" class="answer-audio">
            <span><svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-wenzheng-WIFISVG"></use>
              </svg></span>
            <p>语音回答</p>
            <i>51s</i>
          </div>
          <div class="answer-msg">
            <div class="touxiang"><img :src="require('../assets/img/'+ item.authorImg)"></div>
            <p class="name">{{item.authorName}}</p>
            <p class="address">{{item.authorJob}}</p>
            <p class="state">10元旁听</p>
          </div>
        </li>
      </ul>
      <loading v-show="postJiedaLists.loadingShow"></loading>
      <div  v-show="postJiedaLists.noDataShow" class="no-data-show flex-box">
        <img src="../assets/img/no-data.png">
      </div>
      <button v-show="postJiedaLists.jieDaLists.length>0 && postJiedaLists.checkAllShow" class="check-all" @click="checkAll">查看全部</button>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
import loading from '../components/Loading.vue'
export default {
  data() {
    return {
      list: ''
      // checkAllShow: true,
      // loadingShow: true,
      // noDataShow: false
    }
  },
  name: 'needs',
  components: {
    loading
  },
  computed: {
    mySwiperJD() {
      return this.$refs.mySwiperJD.swiper
    }
  },
  props: ['checkAllState', 'initState', 'postJiedaLists'],
  watch: {
    // $route() {
    //   this.getJiaDa(this.initState)
    // }
  },
  methods: {
    checkAll() {
      // this.getJiaDa(1)
      console.log(this.initState)
      this.$bus.$emit('setNavIndex', this.initState)
      setTimeout(() => {
        this.$router.push('/answer')
      }, 100)
    }
  },
  created() {},
  mounted() {
    console.log(this.postJiedaLists)
    // this.getJiaDa(this.initState)
  }
}
</script>
<style lang="scss" scoped>
.jieda-content {
  width: 100%;
  background: #fff;
}
.qestion-list {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
  border-bottom: #f7f7f7 10px solid;
  .i-lists {
    width: 100%;
    height: 38px;
    border-bottom: 1px solid #eee;
    .swiper-container {
      width: 100%;
      height: 100%;
      .swiper-slide {
        width: auto;
        color: #999;
        font-size: 16px;
        margin-left: 16px;
        margin-right: 16px;
        box-sizing: border-box;
        border-bottom: 2px solid #fff;
        &.active {
          color: #6dbbfe;
          border-bottom: 2px solid #6dbbfe;
        }
      }
    }
  }
  ul {
    width: 100%;
    display: block;
    overflow: hidden;
    li {
      width: 100%;
      display: block;
      float: left;
      padding-top: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid #eee;
      &:last-child {
        border-bottom: none;
      }
      h6 {
        font-size: 16px;
        color: #2f2f2f;
        line-height: 25px;
        margin-bottom: 12px;
        margin-top: 12px;
        a {
          color: #2f2f2f;
        }
      }
      .answer-detail {
        font-size: 12px;
        color: #999999;
        line-height: 22px;
      }
      .answer-audio {
        width: 219px;
        height: 36px;
        line-height: 36px;
        border-radius: 200px;
        background: #6dbbfe;
        margin-top: 12px;
        font-size: 14px;
        float: left;
        text-align: center;
        color: #fff;
        span {
          float: left;
          width: 40px;
          font-size: 18px;
        }
        p {
          width: 129px;
          float: left;
          color: #fff;
        }
        i {
          width: 50px;
          float: left;
        }
      }
      .answer-msg {
        width: 100%;
        float: left;
        margin-top: 24px;
        overflow: hidden;
        margin-bottom: 3px;
        .touxiang {
          width: 16px;
          height: 16px;
          border-radius: 50px;
          overflow: hidden;
          float: left;
          margin-right: 6px;
          img {
            width: 100%;
          }
        }
        .name,
        .address,
        .state {
          display: block;
          float: left;
          margin-top: 3px;
          font-size: 11px;
        }
        .name {
          color: #666;
          margin-right: 6px;
          a {
            color: #666;
          }
        }
        .address {
          color: #ccc;
        }
        .state {
          color: #6dbbfe;
          float: right;
          a {
            color: #6dbbfe;
          }
        }
      }
    }
  }
  .check-all {
    width: 100%;
    text-align: center;
    font-size: r(16);
    line-height: r(48);
    border: none;
    background: none;
    outline: none;
    border-top: 1px solid #eee;
  }
  .no-data-show {
    width: 100%;
    height: 200px;
    img {
      width: 140px;
    }
  }
}
.qestion-list-last {
  border-bottom: none;
}
</style>
